<template>
	<view>
		<view class="nav" :style="{'padding-top': statusbar_height + 'px'}">
			<view class="tabbar">
				<view class="tabbar-left" @click="navBack">
					<image src="/pagesShop/static/left.svg" mode="widthFix"></image>
				</view>
				<view class="tabbar-center">
					<view class="tabbar-tab">
						<view class="tabbar-tab-item" :class="{active: currentIndex1 === 0 }" @click="changeTab1(0)">
							商城订单
						</view>
						<view class="tabbar-tab-item" :class="{active: currentIndex1 === 4 }" @click="changeTab1(4)">
							积分订单
						</view>
					</view>
				</view>
				<view class="tabbar-right"></view>
			</view>
			<view class="navbar">
				<view class="navbar-item" :class="{active: currentIndex2 === 0 }" @click="changeTab2(0)">
					全部
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 === 1 }" @click="changeTab2(1)">
					待支付
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 === 2 }" @click="changeTab2(2)">
					待发货
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 === 3 }" @click="changeTab2(3)">
					待收货
				</view>
				<view class="navbar-item" :class="{active: currentIndex2 === 4 }" @click="changeTab2(4)">
					待评价
				</view>
			</view>
		</view>
		<view class="content">
			<view class="area" v-if="list.length > 0">
				<view class="card tp-br12" v-for="(item, key) in list" :key="key">
					<view v-for="(item1,index1) in item.mallShopOrderVos" :key="index1" @click="goToDetail(item)">
						<view>
							<view class="card-title">
								<view class="level_align">
									<image class="tp-img32 tp-mr20" v-if="item1.scCover" :src="`${shopImgUrl}${item1.scCover}`" mode=""></image>
									<image class="tp-img32 tp-mr20" v-else src="/pagesShop/static/shop.png" mode=""></image>
									<view class="ct-name no-warp">
										<text>{{item1.scName || '店铺名称'}}</text>
									</view>
								</view>
								<view class="ct-status">
									<text>{{ item.status | f1 }}</text>
								</view>
							</view>
							<!-- 商品订单 -->
							<template v-if="currentIndex1 == 0">
								<view class="card-content" v-for="(item2,index2) in item1.mallOrderItems" :key="index2">
									<view class="cc-d">
										<view class="ccd-img">
											<image :src="`${shopImgUrl}${item2.productPic}`" mode="widthFix"></image>
										</view>
										<view class="ccd-c">
											<view class="ccd-t ellispsis1">
												{{item2.productName || '商品名称'}}
											</view>
											<view class="ccd-i ellispsis1">
												<text v-for="(item3,index3) in handleArr1(item2.productAttr)" :key="index3">{{item3.specification}}:{{item3.value}}</text>
											</view>
											<view class="ccd-b">
												<view><text>￥</text> {{item2.productPrice || 0}}</view>
												<view>
													x{{item2.productQuantity || 0}}
												</view>
											</view>
										</view>
									</view>
								</view>
							</template>
							<!-- 积分商品订单 -->
							<template v-if="currentIndex1 == 4">
								<view class="flex tp-ptb0lr30 tp-bbox tp-pb20" v-for="(item2,index2) in item1.mallOrderItems" :key="index2">
									<image class="goods-img tp-br12 tp-mr20" :src="`${shopImgUrl}${item2.productPic}`" mode="aspectFill"></image>
									<view class="flex flex_column flex_around flex-1">
										<view class="tp-fz28 ellispsis1">
											{{item2.productName || '商品名称'}}
										</view>
										<view class="tp-fc666 ellispsis1">
											<text v-for="(item3,index3) in handleArr1(item2.productAttr)" :key="index3">{{item3.specification}}:{{item3.value + ' '}}
											</text>
										</view>
										<view class="tp-fz26 level_align flex_between">
											<view class="tp-red tp-fw600 tp-fz30">￥{{item2.productPrice || 0}}</view>
											<view>
												x {{item2.productQuantity || 0}}
											</view>
										</view>
									</view>
								</view>
							</template>
						</view>
						<view class="card-info" v-if="item1.mallOrderItems.length == 1">
							<text class="tp-mr15">共{{item1.mallOrderItems.length || 0}}件商品 </text><text v-for="it in item1.mallOrderItems"
							 :key='it.id'>￥{{it.productPrice}}</text>
						</view>
						<view class="card-info" v-if="item1.mallOrderItems.length != 1">
							<text class="tp-mr15">共{{item1.mallOrderItems.length || 0}}件商品</text><text>￥{{item.payAmount}}</text>
						</view>
					</view>
					<template v-if="currentIndex1 === 0">
						<view class="card-bottom" v-if="[0,2,3,4].includes(item.status - 0)">
							<button v-if="item.status === '0'" plain @click.stop="action1(item.id)">取消订单</button>
							<button v-if="item.status === '4'" plain @click.stop="action2(item.id)">删除订单</button>
							<button v-if="item.status === '0'" plain class="active" @click.stop="handePay(item)">立即支付</button>
							<button v-if="item.status === '2'" plain class="active" @click.stop="confirmReceive(item)">确认收货</button>
							<button v-if="item.status === '3'" plain class="active" @click.stop="goRouter2(item)">立即评价</button>
							<button v-if="item.status === '4'" plain class="active-plain" @click.stop="goRouter3(item)">查看评价</button>
						</view>
					</template>
					<template v-if="currentIndex1 === 4">
						<view v-if="[0,2,3,4,5].includes(item.status - 0)" class="tp-bgf tp-h98 level_align flex_end" style="border-top: 2rpx solid #F5F5F5;margin-bottom: -15rpx;">
							<view v-if="[0].includes(item.status - 0)" @click.stop="action1(item.id)" class="tp-ptb0lr20 tp-bcF5  tp-br8 tp-h56 center_combo tp-fc666 tp-mr30">
								取消订单
							</view>
							<view v-if="[4].includes(item.status - 0)" @click.stop="action2(item.id)" class="tp-ptb0lr20 tp-bcF5  tp-br8 tp-h56 center_combo tp-fc666 tp-mr30">
								删除订单
							</view>
							<view v-if="[0].includes(item.status - 0)" @click.stop="handePay(item)" class="tp-ptb0lr20 tp-bc tp-br8 tp-h56 center_combo tp-fcF tp-mr30 tp-mr30">
								立即支付
							</view>
							<view v-if="[2].includes(item.status - 0)" @click.stop="confirmReceive(item)" class="tp-ptb0lr20 tp-bc tp-br8 tp-h56 center_combo tp-fcF tp-mr30">
								确认收货
							</view>
							<view v-if="[3].includes(item.status - 0)" @click.stop="goRouter2(item)" class="tp-ptb0lr20 tp-bc tp-br8 tp-h56 center_combo tp-fcF tp-mr30">
								立即评价
							</view>
							<view v-if="[4].includes(item.status - 0)" @click="goRouter3(item)" class="tp-ptb0lr20 tp-bgf tp-border1 tp-br8 tp-h56 center_combo tp-fc tp-mr30"
							 style="border-color: #00B4FF;">
								查看评价
							</view>
						</view>
					</template>
				</view>
				<uni-load-more color="#999" :status="status"></uni-load-more>
			</view>
			<view class="nomore" v-if="list.length === 0 && !loading">
				<view class="nomore-text">
					<image src="/pagesShop/static/zanwu.png" mode="widthFix"></image>
					<view>暂无数据</view>
				</view>
			</view>
		</view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="handleItem.payAmount" :orderInfo="orderInfo" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		filters: {
			f1(v) {
				if (v === '0') {
					return '待支付'
				} else if (v === '1') {
					return '待发货'
				} else if (v === '2') {
					return '待收货'
				} else if (v === '3') {
					return '待评价'
				} else if (v === '4') {
					return '已完成'
				}
			}
		},
		data() {
			return {
				currentIndex1: 0,
				currentIndex2: 0,
				loading: false,
				page: 1,
				status: 'more',
				list: [],
				handleItem: {},
			};
		},
		computed: {
			orderInfo() {
				let o = {
					orderNo: this.handleItem.orderSn,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		onShow() {
			this.getList1()
		},
		onPullDownRefresh() {
			this.status = 'more'
			this.getList1()
		},
		onReachBottom() {
			this.getList1_1()
		},
		methods: {
			// 去订单详情
			goToDetail(item) {
				console.log(item);
				let url = ''
				if (this.currentIndex1 === 4) {
					url = '../order/jifenOrderDetail?id=' + item.id
				} else if (this.currentIndex1 === 0) {
					url = `../order/wait_order?oid=${item.orderSn}&id=${item.id}`
				}
				uni.navigateTo({
					url: url,
				})
			},
			// 去评价
			goRouter2(info) {
				const shopInfo = info.mallShopOrderVos.length && info.mallShopOrderVos[0].mallOrderItems && info.mallShopOrderVos[0]
					.mallOrderItems.length && info.mallShopOrderVos[0].mallOrderItems[0]
				console.log(shopInfo);
				shopInfo.orderSn = info.orderSn
				const pageName = this.currentIndex1 == 4 ? '积分' : '商城';
				uni.navigateTo({
					url: '../details/evaluate?pageName=' + pageName + '&orderNo=' + info.orderSn + '&shopInfo=' + JSON.stringify(
						shopInfo)
				})
			},
			// 查看评价
			goRouter3(item) {
				const pageName = this.currentIndex1 == 4 ? '积分' : '商城';
				uni.navigateTo({
					url: '../details/evaluate?pageName=' + pageName + '&pageType=1&orderNo=' + item.orderSn
				});
			},
			// 订单列表
			getList1() {
				this.page = 1;
				this.loading = true
				this.status = 'more'
				this.$http.post(this.$api.shop_list_10, {}, {
					params: {
						pageNum: this.page,
						type: this.currentIndex1,
						status: this.currentIndex2 > 0 ? this.currentIndex2 - 1 : '',
					}
				}).then(res => {
					uni.stopPullDownRefresh()
					this.loading = false
					if (res.code === 200) {
						this.list = res.data.result
						if (this.list.length < 10) {
							this.status = 'noMore'
						}
					} else {
						this.list = []
						this.status = 'more'
					}
				}).catch(() => {
					uni.stopPullDownRefresh()
					this.loading = false
					this.status = 'more'
					this.list = []
				})
			},
			// 订单列表
			getList1_1() {
				if (this.status === 'noMore') return
				this.page++;
				this.status = 'loading'
				this.$http.post(this.$api.shop_list_10, {}, {
					params: {
						pageNum: this.page,
						type: this.currentIndex1,
						status: this.currentIndex2 > 0 ? this.currentIndex2 - 1 : '',
					}
				}).then(res => {
					if (res.code === 200) {
						const list = res.data.result
						if (list.length > 0) {
							this.list = this.list.concat(list)
						} else {
							this.status = 'noMore'
						}
					} else {
						this.list = []
						this.status = 'more'
					}
				}).catch(() => {
					this.list = []
					this.status = 'more'
				})
			},
			// 取消订单
			action1(id) {
				this.$http.post(this.$api.shop_order_3, {}, {
					params: {
						id: id, // 订单id
					}
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code == 200) {
						this.getList1()
					}
				})
			},
			// 删除订单
			action2(id) {
				this.$http.post(this.$api.shop_order_10, {}, {
					params: {
						id: id, // 订单id
					}
				}).then(result => {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
					if (result.code === 200) {
						this.getList1()
					}
				})
			},
			// 确认收货
			confirmReceive(item) {
				this.$http.post(this.$api.confirmReceipt + '?id=' + item.id).then(res => {
					if (res.code == 200) {
						this.getList1()
						uni.showToast({
							title: '确认成功',
							icon: 'none'
						})
					}
				})
			},
			changeTab1(index) {
				this.currentIndex1 = index
				this.getList1()
			},
			changeTab2(index) {
				this.currentIndex2 = index
				this.getList1()
			},
			handleArr1(str) {
				if (typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch (e) {
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
			getMoney(list) {
				let money = 0
				list.map(item => {
					const price = parseFloat(item.productPrice) || 0
					const num = parseInt(item.productQuantity) || 0
					money += price * num
				})
				return money
			},
			handleMoney(item) {
				const price = parseInt(item.productPrice)
				const num = parseInt(item.productQuantity)
				if (!isNaN(price) && !isNaN(num)) {
					return price * num
				} else {
					return 0
				}
			},
			// 打开立即支付
			handePay(item) {
				console.log(item);
				this.handleItem = item
				this.$refs.commonPay.show()
			},
			// 余额支付
			payMoney(pwd) {
				// #ifdef MP-WEIXIN
				let url = this.$api.shop_order_7 + '?orderNo=' + this.handleItem.orderSn + '&payType=0&sourceType=0&payPassword=' +
					pwd
				// #endif
				// #ifdef H5
				let url = this.$api.shop_order_7 + '?orderNo=' + this.handleItem.orderSn + '&payType=3&sourceType=2&payPassword=' +
					pwd
				// #endif
				this.$http.post(url).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.getList1()
						// this.$refs.commonPay.finishCloseKeyBoard()
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		background-color: #00B4FF;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 88px;
		padding-top: var(--status-bar-height);
	}

	.tabbar {
		height: 44px;
		display: flex;
		justify-content: space-between;
	}

	.tabbar-left,
	.tabbar-right {
		width: 100rpx;
		height: 100%;
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 40rpx;
			height: auto;
		}
	}

	.tabbar-center {
		flex-grow: 1;
		height: 100%;
	}

	.tabbar-tab {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.tabbar-tab-item {
		font-size: 30rpx;
		color: #fff;
		width: 4em;
		margin: 0 50rpx;

		&.active {
			font-weight: bold;
		}
	}

	.navbar {
		height: 44px;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
	}

	.navbar-item {
		flex-grow: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		font-size: 30rpx;

		&.active {
			color: #00B4FF;
			font-weight: bold;

			&::after {
				content: '';
				width: 36rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background-color: #00B4FF;
				position: absolute;
				bottom: 0;
				left: 50%;
				margin-left: -18rpx;
			}
		}
	}

	.nomore {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
	}

	.nomore-text {
		text-align: center;
		font-size: 30rpx;

		image {
			width: 200rpx;
			height: auto;
			margin-bottom: 20rpx;
		}
	}

	.card {
		background-color: #fff;
		box-sizing: border-box;
		margin: 20rpx 30rpx;
		border-radius: 12rpx;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}

	.ct-s {
		display: flex;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.ct-name {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		width: 400rpx;
	}

	.ct-status {
		font-size: 26rpx;
		color: #FFAF3C;
	}

	.card-content {
		display: flex;
		padding: 0 30rpx;

		&:not(:nth-last-of-type(1)) {
			padding-bottom: 20rpx;
		}
	}

	.cc-s {
		display: flex;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.cc-d {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.ccd-img {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		margin-right: 20rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
		}
	}

	.ccd-c {
		flex-grow: 1;
	}

	.ccd-t {
		font-size: 26rpx;
		color: #333;
	}

	.ccd-i {
		margin: 18rpx 0 24rpx;

		text {
			color: #999;
			font-size: 24rpx;
			margin-right: 20rpx;
		}
	}

	.ccd-b {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 24rpx;
		}

		view {
			&:nth-of-type(1) {
				font-size: 28rpx;
				color: $uni-color-error;
				font-weight: bold;
			}

			&:nth-of-type(2) {
				display: flex;
				align-items: center;
			}
		}
	}

	.card-bottom {
		border-top: 1px solid #e8e8e8;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: flex-end;

		button {
			background-color: #EBEBEB;
			color: #666;
			border: 1px solid #ddd;
			// padding: 15rpx;
			height: 54rpx;
			font-size: 28rpx;
			line-height: 1;
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin: 0 0 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&.active {
				background-color: #00B4FF;
				color: #fff;
				border: 0;
			}

			&.active-plain {
				background-color: transparent;
				color: #00B4FF;
				border: 1px solid #00B4FF;
			}
		}
	}

	.goods-img {
		width: 140rpx;
		height: 140rpx;
	}

	.card-info {
		font-size: 24rpx;
		color: #333;
		text-align: right;
		padding: 30rpx;
	}
</style>
